<template>
  <a-modal
    wrap-class-name="error-msg-modal"
    :open="visible"
    :footer="null"
    width="740px"
    centered
    style="z-index: 2000"
    :="$attrs"
    @cancel="hideMsgModal">
    <template #title>
      <a-row :gutter="20">
        <a-col :span="1" class="flex-center">
          <i
            i-ant-design-close-circle-filled
            close-one
            size="24"
            fill="#ff3325"
            class="color-red-500 dark:color-red-600" />
        </a-col>
        <a-col :span="20" class="font-normal">
          <b class="font-size-16px">{{ title }}</b>
          <p class="m-t-2px font-size-14px font-bold">{{ msg }}</p>
        </a-col>
      </a-row>
    </template>
    <a-table
      v-if="table && table.dataSource.length"
      class="auto-height-scroll-table"
      :columns="table.columns"
      :data-source="table.dataSource"
      :pagination="false"
      :scroll="{ y: '230px !important' }"
      size="small" />
    <div class="error-msg-solution">
      <span v-if="solution">如何解决： {{ solution }}</span>

      <!-- <router-link v-if="link" target="_blank" :to="link" style="color: #3b8bff">
        如何操作？
      </router-link> -->
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import { errProps, hideMsgModal } from './useErrorMsg';
const { visible, title, msg, link, table, solution } = errProps;
</script>
<style scoped>
.ant-table-wrapper + .error-msg-solution {
  @apply p-t-4 p-x-5 font-bold;
}
</style>
<style>
.error-msg-modal {
  z-index: 10100;
}

.error-msg-modal .ant-modal-header {
  @apply p-t-4 p-x-5 p-y-10px;
}

.error-msg-modal .ant-table-small .ant-table-thead > tr > th {
  @apply bg-white dark:bg-black;
}

.error-msg-modal .ant-table.ant-table-small .ant-table-tbody > tr > td {
  @apply bg-trueGray-50 border-b-1px border-b-solid border-color-white
    dark:bg-trueGray-800 dark:border-color-black;
}

.error-msg-modal .auto-height-scroll-table .ant-table-body {
  @apply h-auto max-h-auto;
}
</style>
